<template>
    <div>
        <header class="mc-header">
            <el-form :inline="true" :model="formInline" class="form-inline">
                <div class="form-item-wrap">
                    <el-form-item label="客户状态">
                        <el-select v-model="formInline.apply_status">
                            <el-option label="全部" value="-1"></el-option>
                            <el-option label="未分配" value="1"></el-option>
                            <el-option label="已分配" value="2"></el-option>
                            <el-option label="已添加" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="客户手机号/姓名">
                        <el-input v-model="formInline.mobile_or_name" placeholder="请输入客户手机号/姓名"></el-input>
                    </el-form-item>
                </div>
                <el-form-item class="btn_box">
                    <el-button type="primary" @click="inintList">查询</el-button>
                    <el-button @click="onClear">清空</el-button>
                </el-form-item>
            </el-form>
        </header>
        <!-- 录入客户 -->

        <div class="input-btn">
            <div class=""></div>
            <el-button :disabled="multipleSelection.length == 0" @click="openDepart('', 0)">批量分配</el-button>
        </div>

        <!-- 表格 -->
        <el-table
            ref="multipleTableRef"
            row-key="id"
            :data="tableData"
            style="width: 100%"
            height="500"
            stripe
            header-row-class-name="table_header_title"
            @selection-change="handleSelectionChange">
            <el-table-column :reserve-selection="true" type="selection" width="55" fixed="left" />
            <el-table-column prop="mobile" label="客户电话" width="200">
                <template #default="scope">
                    <div class="explicit-wrap" @click="scope.row.isShow = !scope.row.isShow">
                        手机：
                        <img v-show="scope.row.isShow" width="14" height="10" src="@/assets/customer/eye.png" alt="" />
                        <span v-show="!scope.row.isShow">{{ scope.row.mobile }}</span>
                    </div>
                </template>
            </el-table-column>

            <el-table-column prop="name" label="姓名/性别/地区" width="200">
                <template #default="scope">
                    <span>{{ scope.row.name || '--' }}</span
                    >/ <span>{{ scope.row.sex == 1 ? '男' : '女' }}</span
                    >/
                    <span>{{ scope.row.cust_baseinfo.region || '--' }}</span>
                </template>
            </el-table-column>

            <el-table-column prop="tag_info" label="客户标签" width="200">
                <template #default="scope">
                    <el-popover
                        v-if="scope.row.tag_info.length > 0"
                        placement="top"
                        :width="400"
                        trigger="hover"
                        popper-class="popper zw-el-tags">
                        <template #reference>
                            <div class="zw-el-tags">
                                <el-tag v-for="item in scope.row.tag_info" :key="item">{{ item.name }}</el-tag>
                            </div>
                        </template>
                        <div class="pop_dialog">
                            <el-tag v-for="item in scope.row.tag_info" :key="item">{{ item.name }}</el-tag>
                        </div>
                    </el-popover>
                    <div v-else class="zw-el-tags">
                        <el-tag v-for="item in scope.row.tag_info" :key="item">{{ item.name }}</el-tag>
                    </div>
                    <div v-if="scope.row.tag_info.length == 0">--</div>
                </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注">
                <template #default="scope">
                    <div>{{ scope.row.cust_baseinfo.remark }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="apply_record" width="600" label="分配员工">
                <template #default="scope">
                    <el-popover
                        v-if="scope.row.apply_record && scope.row.apply_record.length > 1"
                        placement="top"
                        :width="500"
                        trigger="hover"
                        popper-class="popper">
                        <template #reference>
                            <div v-for="(item, index) in scope.row.apply_record" :key="item.id">
                                <div v-if="index < 2" style="display: flex; flex-wrap: wrap">
                                    <div>{{ item.content }}</div>
                                    <div v-for="work in item.work_user" :key="work.id" style="display: flex">
                                        <div class="tag_box">
                                            <sapn style="padding: 0 5px">{{ work.name }}</sapn>
                                            <span class="tag_box">
                                                <el-tag
                                                    v-for="department in work.work_department"
                                                    :key="department.id"
                                                    >{{ department.name }}</el-tag
                                                >
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>
                        <el-scrollbar :max-height="300">
                            <div v-for="item in scope.row.apply_record" :key="item.id">
                                <div style="display: flex; flex-wrap: wrap">
                                    <div>{{ item.content }}</div>
                                    <div v-for="work in item.work_user" :key="work.id">
                                        <div>
                                            <sapn style="padding: 0 5px">{{ work.name }}</sapn>
                                            <span class="zw-el-tags">
                                                <el-tag
                                                    v-for="department in work.work_department"
                                                    :key="department.id"
                                                    size="small"
                                                    >{{ department.name }}</el-tag
                                                >
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-scrollbar>
                    </el-popover>
                    <div v-for="(item, index) in scope.row.apply_record" v-else :key="item.id">
                        <div v-if="index < 2" style="display: flex; flex-wrap: wrap">
                            <div>{{ item.content }}</div>
                            <div v-for="work in item.work_user" :key="work.id" style="display: flex">
                                <div class="tag_box">
                                    <sapn style="padding: 0 5px">{{ work.name }}</sapn>
                                    <span class="zw-el-tags">
                                        <el-tag v-for="department in work.work_department" :key="department.id">{{
                                            department.name
                                        }}</el-tag>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-if="scope.row.apply_record && scope.row.apply_record.length == 0">--</div>
                </template>
            </el-table-column>
            <el-table-column prop="add_status" label="添加状态" />
            <el-table-column label="操作" width="120" fixed="right">
                <template #default="scope">
                    <el-button size="small" @click.prevent="openDepart(scope.row, 1)">再次分配</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="page-container">
            <el-pagination
                v-model:currentPage="pageInfo.page"
                v-model:page-size="pageInfo.page_size"
                :page-sizes="[15, 25, 50, 100]"
                background
                layout="total, prev, pager, next, sizes"
                :total="pageInfo.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
            </el-pagination>
        </div>
        <!-- 分配员工 -->
        <ZWDepart ref="DepartRef" @submit="getDepart" />
    </div>
</template>

<script lang="ts" setup>
import ZWDepart from '@/components/ZWDepart.vue';
import { getCustList, distributionFile } from '@/api/customer';
import { getSetionId } from '@/utils/utils';

import { ref, reactive, computed, watch, onMounted } from 'vue';
import { useStore } from '@/store';
import { ElMessage } from 'element-plus';

const store = useStore();

const ZWDepartDom = ref(null);
const DepartRef: any = ref(null);
const multipleTableRef: any = ref(null);
const props = defineProps({
    id: String
});
const formInline = reactive({
    apply_status: '-1',
    mobile_or_name: '',
    cus_import_id: props.id // 导入记录id
});
const pageInfo = reactive({
    page_size: 15,
    page: 1,
    total: 0
});
//一页多少数据
const handleSizeChange = val => {
    pageInfo.page_size = val;
    fetch();
};
// 当前页
const handleCurrentChange = val => {
    pageInfo.page = val;
    fetch();
};
const tableData = ref([]);
// 表格多选
const multipleSelection = ref([]);
const handleSelectionChange = (val: any) => {
    multipleSelection.value = val.map((item: any) => item.id);
};
const filterTag = (e: any) => {
    // console.log('filterTag', e)
};
// 员工所属部门或者客户
const creators = ref([]);
const formData: {
    customer_list: number[];
    work_user_list: number[];
} = reactive({
    customer_list: [], // 客户ID
    work_user_list: [] // 员工ID
});
// 查询列表
const fetch = () => {
    getCustList({
        ...pageInfo,
        ...formInline
    }).then((res: any) => {
        res.data.forEach((item: any) => {
            item.isShow = true;
        });
        tableData.value = res.data;
        pageInfo.total = res.total;
    });
};
const statusType = ref(1);
const again = ref(0);
//打开新建选择人
const openDepart = (val: any, status: number) => {
    statusType.value = status;
    again.value = val.import_id;
    DepartRef.value.selectedMember = [];
    if (status === 1) {
        formData.customer_list = [val.id];
    }
    DepartRef.value.departVisble = true;
};
// 获取部门成员
const getDepart = async (res: any) => {
    creators.value = res;
    formData.work_user_list = getSetionId('id', creators.value);
    DepartRef.value.removeItem([]);
    statusType.value
        ? await distributionFile({ ...formData, import_id: again.value })
        : await distributionFile({ customer_list: multipleSelection.value, work_user_list: formData.work_user_list });
    inintList();
    ElMessage.success('分配成功');
};
const changeDepart = (data: any) => {
    const removeDepart = creators.value.find((item: any) => !data.includes(item.id));
    const arr: any[] = creators.value.filter((item: any) => data.includes(item.id));
    formData.work_user_list = getSetionId('id', arr);
    creators.value = arr;
    DepartRef.value.removeItem(removeDepart);
};
const inintList = () => {
    pageInfo.page = 1;
    pageInfo.page_size = 15;
    multipleTableRef.value!.clearSelection();
    fetch();
};
const onClear = () => {
    formInline.apply_status = '-1';
    formInline.mobile_or_name = '';
    multipleTableRef.value!.clearSelection();
    inintList();
};
onMounted(() => {
    inintList();
});
</script>

<style scoped lang="scss">
.tag_box {
    display: flex;
    flex-wrap: wrap;
}

.form-tags {
    margin: 0 10px 0 0;
}

.select-box {
    padding: 0 9px;
    border: 1px solid #eaeaea;
    background: #f9f9f9;
    border-radius: 1px;
    margin-right: 28px;

    :deep .el-input__inner {
        border: none;
        background: #f9f9f9;
    }
}

.input-btn {
    width: 100%;
    padding: 16px 0 10px;
    display: flex;
    justify-content: space-between;

    // padding: 20px 0;
}

.mc-header {
    background-color: #f9f9f9;
    width: 100%;

    .form-inline {
        width: 100%;
        justify-content: space-between;
        padding: 16px 0;

        .el-form-item {
            margin-bottom: 0;
            padding: 0 18px;
        }

        display: flex;
        align-items: center;
    }
}

.page-container {
    text-align: right;
    margin: 20px 0;
    padding-bottom: 20px;

    // margin-right:-20px;
}

.tags_con {
    margin: auto;
    width: 100%;
    align-items: center;
    display: flex;

    .tags_box {
        text-align: left;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .tag_total {
        // flex: 1;
        span {
            color: #ff6b00;
        }
    }
}

.img {
    width: 80px;
}

.table_tag {
    display: inline-block;
    color: #969696;
    padding: 4px 10px;
    background: #fff;
    border: 1px solid #eaeaea;
    margin: 5px;
}

.high_light {
    border: 1px solid #ff6b00;
    color: #ff6b00;
}

.table_tag_con {
    display: flex;
    align-items: center;
}

.explicit-wrap {
    cursor: pointer;
}

:deep(.el-table) {
    --el-table-row-hover-bg-color: #fffaf9;
}

.btn_box {
    margin-right: 6px;
}

:deep(.el-table--layout-fixed .el-table__header-wrapper tr th.el-table-fixed-column--left) {
    background-color: #f9f9f9;
}

:deep(.el-table--layout-fixed .el-table__header-wrapper tr th.el-table-fixed-column--right) {
    background-color: #f9f9f9;
}
</style>
